<template>
  <div class="table-ctrl-body" :class="{'backgroundColor': backgroundColor}">
    <!--按钮组-->
    <div class="Btns-ctrl-body">

      <!--高级搜索
      -->
      <SearchPublic
        :searchObj="searchObj"
        @searchParams="searchParamsFn"
      ></SearchPublic>

<!--        <div class="search-ctrl f-l" >
          <form style="height: 100%;">
            <input placeholder="根据重点人姓名" @keyup="defaultLoad($event)" v-model="tableParams.nameLike" class="search-text">
          &lt;!&ndash;  <button class="search-btn btn btn-default more-btn" @click="searchMoreShowFn" type="button">更多条件</button>&ndash;&gt;
            <button class="search-btn btn btn-info" @click="searchDotResource" type="button">搜索</button>
          </form>
        </div>-->

      <div class="btns f-r">
        <button type="button" class="btn btn-info" @click="toggleAddModal">新增</button>
        <button type="button" class="btn btn-warning" @click="toggleRevampModal">修改</button>
        <button type="button" class="btn btn-danger" @click="deleteFn">删除</button>
        <button type="button" class="btn btn-success" @click="isDetailsModalFn">详情</button>
        <button type="button" class="btn btn-info" @click="pushModal">导入</button>
        <!--   <button type="button" class="btn btn-info">添加重点人关系</button>
           <button type="button" class="btn btn-danger">删除重点人关系</button>-->
      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <!--{{treeTableRow}}-->
      <div class="table-header">
        <table class="table-default">
          <thead class="query-table">
          <tr>
            <th
                v-for="ths in tableHeader">
              {{ths.value}}
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <!--表格中部-->
      <div class="table-overflowX ">
        <table class="table-default">
          <tbody>
            <tr
                v-for="(trs,index) in tableRow.data"
                @click="userSelect(trs,index)"
                :class="{active: isActive===index}"
            >
              <td
                  v-for="(tds,tdsIndex) in tableHeader"
                  :title=" [trs,tds.key] | keyPersonListFilter"
              >
                {{ [trs,tds.key] | keyPersonListFilter }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages
        v-show="tableRow.elementsSum !== 0"
        v-if="tableRow"
        :showItem="10"
        :pageSize="20"
        :allDataSum="tableRow.elementsSum"
        :allpage="(Math.ceil(tableRow.elementsSum/20))"
        @current-change="tablePageData"
      ></Pages>

      <!--新增-->
      <AddkeyPersonListModal
        :addModalObj="addModalObj"
        @addModalClose="toggleAddModal"
      ></AddkeyPersonListModal>

      <!--修改-->
      <RevampkeyPersonListModal
        :RevampModalObj="RevampModalObj"
        :selectRowId="selectRowId"
        :permissions="permissions"
        :isDetailsModal="isDetailsModal"
        @toggleRevampModalFn="toggleRevampModal"
      ></RevampkeyPersonListModal>

      <!--导入-->
      <BulkImport
        :bulkImportObj="bulkImportObj"
        @upModalClose="upModalCloseFn"
      ></BulkImport>
    </div>
    <!--表格组 end-->
  </div>
</template>

<script>
  import Pages from "../../sudoku/atom/pages.vue"
  import AddkeyPersonListModal from "./AddkeyPersonListModal"
  import RevampkeyPersonListModal from "./RevampkeyPersonListModal"
  import BulkImport from "../../publicTemplate/bulkImport/BulkImport"
  import SearchPublic from "../../publicTemplate/search/SearchPublic"
  export default {
    name: "keyPersonList",
    data(){
      return {
        isActive:-1,
        selectRowId:"",
        searchContent:"",
        permissions:false,
        searchMoreIsShow:false,
        bulkImportObj:{
          title:"导入重点人信息",
          isShow:false,
          TemplateUrl:"/BS/ImportPersonExcel/upExcel/template",
          upUrl:"/BS/ImportPersonExcel/upExcel",
          urlType:"ControlObject"
        },
        addModalObj:{
          isShow:false
        },
        RevampModalObj:{
          isShow:false
        },
        isDetailsModal:false,
        tableRow: [],  // 表格数据
        tableHeader: [
          {"key":"name","value":"姓名"},
          {"key":"idCardNo","value":"身份证号"},
          {"key":"importPersonInfoForBS|birthday","value":"出生日期"},
          {"key":"birthPlace","value":"户籍所在地"},
          {"key":"ownerGroup","value":"所属群体"},
          {"key":"importPersonTypeAndRootTypes|type|typename","value":"重点人类型"},
          {"key":"importPersonInfoForBS|personLevel","value":"人员等级"},
          {"key":"stationName","value":"所属单位"},
        ],
        tableParams:{
          pageIndex:1,
          pageSize:20,
          nameLike:"",
          idCardNoLike:"",
          mobileLike:"",
          ownerGroupLike:"",
          typeId:"",
        },
        searchObj:{
          condition:[
            {"title":"重点人身份证","type":"text","key":"idCardNoLike","value":''},
            {"title":"手机号","type":"text","key":"mobileLike","value":''},
            {"title":"重点人名字","type":"text","key":"nameLike","value":''},
            {"title":"所属群体","type":"text","key":"ownerGroupLike","value":''},
            {"title":"重点人类型","type":"treeSection","key":"typeId","value":'','data':''},
          ],
          htmlType:"searchDefaultPublic",
          userId: '',
        },
        backgroundColor: false,
        userId:'',
      }
    },
    components:{
      Pages,
      AddkeyPersonListModal,
      RevampkeyPersonListModal,
      BulkImport,
      SearchPublic
    },
    mounted () {
      if (this.$route.query.type === 'wpf') {
        this.userId = this.$route.query.userId;
        const userSession = {
          "userName":'wpf',
          "userId":this.userId,
          "loginName":'wpf',
        };
        sessionStorage.setItem("userSession",JSON.stringify(userSession));
        this.backgroundColor = true
      }else{
        this.userId = this.isLogin().userId;
      }
      this.init();
      this.getKeyPersonClassTree();
    },
    methods: {
      //获取重点人类型结构
      getKeyPersonClassTree(){
        //GET /BS/ImportPersonType/all/{userId}
        /*兼容wpf*/
        this.$axios.get(this.ControlObject + "/BS/ImportPersonType/all/" + this.userId )
          .then( res =>{
            //console.log(res);
            let seccessData = res.data;
            let setNewData = [];
            for( let i=0;i<seccessData.length;i++ ){
              let obj = {};
              obj.id = seccessData[i].id;
              obj.name = seccessData[i].typename;
              obj.pId = seccessData[i].parentid;
              setNewData.push(obj)
            }
            //console.log(setNewData);
            this.searchObj.condition[4].data = setNewData;
          })
          .catch( err =>{
            //console.log(err);
          })
      },
      init(){
        // 表格数据初始化
        this.initTable();
      },
      initTable () {
        this.clearData();
        /*兼容wpf*/
        let _userId = this.isLogin().userId;
        if (this.userId != '') {
          _userId = this.userId
        }
        this.$axios({
          url: this.ControlObject+'/BS/ImportPerson/info/page/V2?userId='+_userId,
          method: 'get',
          params: this.tableParams
        }).then( res => {
          //console.log(res);
          this.tableRow = res.data
        })
      },
      tablePageData(pageIndex){
        this.tableParams.pageIndex = pageIndex;
        this.initTable();
      },
      //默认加载
      defaultLoad(ev){
        if( ev.keyCode === 8 ){
          if( this.tableParams.nameLike === "" ){
            this.initTable();
          }
        }
      },
      //更多搜索
      searchMoreShowFn(){
        this.searchMoreIsShow = !this.searchMoreIsShow;
      },
      //搜索功能
      searchDotResource(){
        this.initTable();
      },
      //新增弹窗显示与隐藏
      toggleAddModal(){
        this.addModalObj.isShow = !this.addModalObj.isShow;
        ////console.log(this.addModalObj.isShow);
        if( this.addModalObj.isShow === false ){
          //重新加载表格
          this.initTable();
        }
      },
      //导入用户模板
      pushModal(){
        this.bulkImportObj.isShow = true;
      },
      upModalCloseFn(){
        this.bulkImportObj.isShow = false;
        this.initTable();
      },
      //详情
      isDetailsModalFn(){
        if( this.selectRowId !=="" ){
          this.RevampModalObj.isShow = !this.RevampModalObj.isShow;
          this.isDetailsModal = true;
        }else{
          this.s_alert("请选择需要查看的重点人！");
        }
      },
      //修改弹窗显示与隐藏
      toggleRevampModal(){
        if( this.selectRowId !=="" ){
          this.RevampModalObj.isShow = !this.RevampModalObj.isShow;
          this.isDetailsModal = false;
        }else{
          this.s_alert("请选择需要修改的重点人！");
        }
        if( this.RevampModalObj.isShow === false ){
          //重新加载表格
          this.initTable();
        }
      },
      //删除
      deleteFn(){
        if( this.permissions ){
          if( this.selectRowId !=="" ){
            let msg = confirm("请问是否删除该重点人？");
            if( msg ){
              //DELETE /BS/ImportPerson/{id}
              let _userId = this.isLogin().userId;
              if (this.userId != '') {
                _userId = this.userId
              }
              this.$axios.delete(this.ControlObject+"/BS/ImportPerson/"+this.selectRowId+"?userId="+_userId)
                .then((data)=>{
                  //console.log(data);
                  this.s_alert("删除成功！");
                  this.init();
                })
                .catch((err)=>{
                  this.s_alert("删除失败！");
                  //console.log(err);
                })
            }
          }else{
            this.s_alert("请选择需要删除的重点人！");
          }
        }else{
          this.s_alert("您没有权限删除该重点人！");
        }

      },
      //重点人选择
      userSelect(obj,index){
        this.isActive = index;
        this.selectRowId = obj.id;
        this.permissions = obj.permissions;
        console.log(obj);
      },
      //清除缓存
      clearData(){
        this.isActive = -1;
        this.selectRowId = "";
        this.permissions = false;
      },
      //搜索
      searchParamsFn(searchParams){
        //console.log(this.searchObj.condition);
        for( let i=0;i<this.searchObj.condition.length;i++ ){
         for( let paramsKey in this.tableParams ){
           if( this.searchObj.condition[i].key === paramsKey ){
             this.tableParams[paramsKey] = this.searchObj.condition[i].value;
           }
         }
        }
        this.initTable();
      },
      //清除搜索条件
      clearSearch(){
        this.tableParams = {
          pageIndex:1,
          pageSize:20,
          nameLike:"",
          idCardNoLike:"",
          mobileLike:"",
          ownerGroup:"",
        };
        this.searchDotResource();
      }
    },
  }
</script>

<style scoped>
  .main-controller-body.wpf, .table-ctrl-body.main-controller-body.wpf .backgroundColor {
  background: #00213b;
}
</style>
